<template>
  <div
    class="custom-textarea"
    :style="{
      '--width': `${width}px`
    }">
    <div
      v-if="wordLimitType === 'multiple-line'"
      class="custom-textarea_vertical"
      :style="{ '--width': `${width}px`, '--height': `${height}px` }">
      <a-textarea
        v-model="val"
        :placeholder="placeholder"
        :class="{ 'is-autoSize': autoSize }"></a-textarea>
      <span
        v-if="showWordLimit"
        class="absolute right-3 bottom-2 text-#BFC2C7 z-1 text-xs/5"
        >{{ urls.length }}/{{ maxLength }}</span
      >
    </div>
    <a-textarea
      v-else
      v-model="val"
      :placeholder="placeholder"
      :max-length="maxLength"
      :show-word-limit="showWordLimit"
      :style="{ '--height': `${height}px` }"
      :class="{ 'is-autoSize': autoSize }"></a-textarea>
  </div>
</template>
<script lang="ts" setup>
interface IProps {
  maxLength?: number
  showWordLimit?: boolean
  wordLimitType?: 'multiple-line' | 'single-line'
  placeholder?: string
  autoSize?: boolean
}
withDefaults(defineProps<IProps>(), {
  maxLength: 400,
  showWordLimit: true,
  wordLimitType: 'single-line',
  placeholder: '请输入',
  autoSize: false
})
const val = defineModel<string>('value', { required: true })
const width = defineModel<number>('width', {
  required: false,
  default: 400
})
const height = defineModel<number>('height', { required: false, default: 88 })
const urls = computed(() => {
  return val.value?.split('\n').filter((item) => item.length) ?? []
})

defineExpose({
  urls
})
</script>

<style lang="less" scoped>
.custom-textarea {
  min-width: var(--width) !important;
  width: fit-content;
  &_vertical {
    @apply relative;
  }
  .is-autoSize {
    :deep(.arco-textarea) {
      @apply !max-w-full;
      resize: both !important;
      min-width: var(--width) !important;
    }
  }
  :deep(.arco-textarea) {
    min-height: var(--height) !important;
  }
}
</style>
